<template>
  <el-dialog title="品种查询" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-card class="box-card" style="margin-bottom: 15px;">
      <div class="text item">
        <el-form inline label-width="90px">
          <el-form-item label="商品类别">
            <el-select v-model="dataForm.ctgId">
              <el-option v-for="(item,index) in this.ctgOption" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="制造商">
            <el-input v-model="dataForm.supplyName">
              <el-button slot="append" @click="openSupplyDialog">选择</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="品种编码">
            <el-input v-model="dataForm.code"></el-input>
          </el-form-item>
          <el-form-item label="品种名称">
            <el-input v-model="dataForm.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="info" plain @click="getDataListt">查询</el-button>
            <el-button icon="el-icon-delete" type="info" plain @click="clearSearchForm">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-row>
        <el-button @click="checkAndClose">选择并关闭</el-button>
      </el-row>
    </el-card>
    <el-table :data="dataList" height="calc(100vh - 215px)" ref="singleTable" border v-loading="dataListLoading" @select="onTableSelect" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="code" label="品种编码"></el-table-column>
      <el-table-column prop="name" label="品种名称"></el-table-column>
      <el-table-column prop="ctgName" label="商品类别"></el-table-column>
      <el-table-column prop="supplyName" label="制造商"></el-table-column>
    </el-table>
    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
    <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply>
  </el-dialog>
</template>

<script>
  import {filterParams} from '@/util/tools'
  import { fetchBrandList } from '@/api/eims/brand'
  import { getCtgList } from '@/api/eims/ctg'

  import SearchSupply from './SearchSupply'
  export default {
    data () {
      return {
        visible: false,
        selected: true,
        rowItem: {},
        ctgOption: [],
        multipleSelection: [],
        dataForm: {
          supplyId: '',
          supplyCode: '',
          supplyName: '',
          ctgId: '',
          status: ''
        },
        dataList: [],
        dataListLoading: false,
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        supplyVisible: false,
      }
    },
    components:{
      SearchSupply
    },
    methods: {
      init(data) {
        this.visible = true
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.multipleSelection = data
        this.getCtgList()
      },
			clearSearchForm() {
				for(let key in this.dataForm){
					this.dataForm[key] = ''
				}
			},
      getDataListt() {
        if(!this.dataForm.ctgId){
          this.$message.warning('请选择商品类别')
          return false
        }
        if(!this.dataForm.supplyId){
          this.$message.warning('请选择制造商')
          return false
        }
        let params1 = {current: this.pageIndex,size: this.pageSize}
        let params2 = filterParams(this.dataForm)
        fetchBrandList(Object.assign(params1,params2)).then(response => {
					if(response.data.code == '0'){
					  let list = response.data.data.records
					  list.forEach((item,index) => {
					    list[index].brandCode = item.ctgCode + '.' + item.supplyCode + '.' + item.code
					    list[index].brandBarcode = item.ctgCode + item.supplyCode + item.code
					  })
					  this.dataList = [...list]
					  this.totalPage = response.data.data.total
					  this.$nextTick(() => {
					    this.multipleSelection.forEach(item => {
					      for (let i = 0; i < this.dataList.length; i++) {
					        if (item.id == this.dataList[i].id){
					          this.$refs.singleTable.toggleRowSelection(this.dataList[i], true)
					        }
					      }
					    })
					  })
					}else{
					  this.$message.error(response.data.msg)
					}
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataListt()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataListt()
      },
      //  判断当前操作的属性是勾选还是取消勾选
      onTableSelect(rows,row) {
        this.selected = rows.length && rows.indexOf(row) !== -1
        this.rowItem = row
      },
      handleSelectionChange(val) {
        if(this.selected){
          val.forEach(item => {
            let result = this.multipleSelection.some(term => {
              if(term.id == item.id){
                return true
              }
            })
            if(!result){
              this.multipleSelection.push(item)
            }
          })
        }else{
          let that = this
          this.multipleSelection = this.multipleSelection.filter(function(item){
            return (item.goodId != that.rowItem.goodsId || item.batch != that.rowItem.batch || item.invalidTime != that.rowItem.invalidTime)
          })
        }
      },
      // 选择并关闭
      checkAndClose(){
        this.visible = false
        this.$emit('updateForm', this.multipleSelection)
      },
      // 商品类别列表查询
      getCtgList(){
        getCtgList().then(response => {
					if(response.data.code == '0'){
					  this.ctgOption = response.data.data
					}else{
					  this.$message.error(response.data.msg)
					}
        })
      },
      // 打开制造商列表
      openSupplyDialog(){
        this.supplyVisible = true
        this.$nextTick(() => {
          this.$refs.supplyDialog.init(this.dataForm.ctgId)
        })
      },
			// 获取制造商信息
			getSupplyData(row){
        this.$set(this.dataForm,'supplyName',row.name)
        this.$set(this.dataForm,'supplyId',row.id)
			}
    }
  }
</script>

<style>
</style>
